@import url('https://fonts.googleapis.com/css?family=Ubuntu');
*{
	margin: 0;
	padding: 0;
	font-family: 'B Traffic', 'B Roya', 'B Nazanin', 'B Homa', 'B Badr',sans-serif;
	box-sizing: border-box;
}

.wrapper{
	max-width: 700px;
	margin: 150px auto;
    background:transparent;
	padding: 40px;
	box-shadow: 0 0 5px rgba(0,0,0,0,.5);
}
h1{
	text-align: center;
	text-decoration: uppercase;
	color: #fff;
	margin-bottom: 50px;
	font-size: 35px;
}
.address{
	display:flex;
	justify-content: space-around;
	text-align: center;
	color: #fff;
	margin-bottom: 50px;
}

.inner-address p{
	font-size: 15px;
}

.inner-address .fas{
	font-size: 20px;
	margin-bottom: 10px;
}

.form{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 50px;
}

.form-title{
	font-size: 25px;
	margin-bottom: 20px;
	color:#fff;
	text-align: center;
}

.input-form{
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin-bottom: 20px;
}

.inner-msg{
	width: 100%;
	margin-bottom: 20px;
}
.input > input{
	border: 0;
	width: 260px;
	padding: 10px 20px;
	outline: none;
	text-align: right;
}

.msg > textarea{
	width: 100%;
	border: 0;
	padding: 10px 20px;
	outline: none;
	height: 80px;
	text-align: right;
}

.btn{
	border: 2px solid #fff;
	padding: 10px 20px;
	color: #fff;
	cursor: pointer;
	transition: all 0.5s ease;
}

.btn:hover{
	background: #fff;
	color: #6465a5;
}

.social{
	display: flex;
	justify-content: center;
	color: #fff; 
}

.inner-social .fab{
	margin: 0 20px;
	font-size: 15px;
	cursor: pointer;
	transition: all 0.5s ease;
	color: #fff; 
}

.inner-social .fa{
	margin: 0 20px;
	font-size: 15px;
	cursor: pointer;
	transition: all 0.5s ease;
	color: #fff; 
}

.fab:hover{
	color:#68A684;
}

.fa:hover{
	color:#68A684;
}


::-webkit-input-placeholder{
	color: #a9aacd;
}

::-moz-input-placeholder{
	color: red;
}

::-ms-input-placeholder{
	color: #a9aacd;
}


@media screen and (max-width: 640px){
	.input-form{
		flex-direction: column;
	}
	.input:first-child > input{
		margin-bottom: 20px;
	}
	.form .input > input{
		width: 100%;
	}
}

@media screen and (max-width: 580px){
	.address,
	.social{
		flex-direction: column;
		align-items: center;
	}
	
	.inner-address,
	.inner-social{
		margin-bottom: 20px;
	}
}